<template name="hongren-swiper">
	<view class="">
		<block v-if="type=='swiper1'">
			<swiper class="swiper1" indicator-dots circular :duration="1000" :current="current">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<series-item></series-item>
					<!--navigator class="swiper1_item" :url="item.path" hover-class="none" v-if="item.path && item.path.length>0">
						<image class="autoImage" :src="item.image" mode="widthFix"></image>
					</navigator>
					<view class="swiper1_item" v-else>
						<image class="autoImage" :src="item.image" mode="widthFix"></image>
					</view-->
				</swiper-item>
			</swiper>
		</block>
		<block v-if="type=='swiper2'">
			<swiper class="swiper2" :duration="1000" circular :current="current" previous-margin="250rpx" next-margin="250rpx" @change="change">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<navigator class="swiper2_item" :url="item.path" hover-class="none" v-if="item.path && item.path.length>0" :class="current==index?'swiper2_active':''">
						<image class="" :src="item.image" mode="aspectFill"></image>
					</navigator>
					<view class="swiper2_item" v-else  :class="current==index?'swiper2_active':''">
						<!--image class="" :src="item.image" mode="aspectFill"></image-->
						<view class="product-item" @click="navigateTo(item)">
							<view class="image-border">
								<view class="nft-tag" v-if="item.type != 'shop' && isShowTags == '1'"></view>
								<image :src="item.mainImg"></image>
								<view class="sold">
									<u-icon name="/static/icon_sold_out.png" v-if="item.stock <= 0" size="100rpx"></u-icon>
								</view>
								<!--view class="mainImg">
									<image :src="item.mainImg"></image>
									<view class="sold">
										<u-icon name="/static/icon_sold_out.png" v-if="item.stock <= 0" size="100rpx"></u-icon>
									</view>
								</view-->
							</view>
							<view class="product-info">
								<u--text
									:lines="1"
									:text="item.name"
									color="#000000"
									size="21rpx"
									align="center"
								></u--text>
								<view class="product-price">
									<u--text
										bold
										color="#356CE7"
										:text="item.price"
										size="27rpx"
										:lines="1"
										align="center"
										prefixIcon="rmb"
										iconStyle="font-size: 18rpx; color: #356CE7; font-weight: bold;"
									>
									</u--text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</block>
		<block v-if="type=='swiper3'">
			<swiper class="swiper3" :duration="1000" :autoplay="true" circular :current="current" @change="change">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<series-item :series="item"></series-item>
				</swiper-item>
			</swiper>
		</block>
	</view>
</template>
<script>
	/**
	 * 方法说明
	 * author: ywg
	 * description: Fevering lei
	 * @param
	 * @return
	 * @createTime: 2021-6-22 10:11:20 ?F10: AM?
	 */
	import SeriesItem from '@/components/SeriesItem'
	export default {
		name: "hongren-swiper",
		props: ["s_type","s_list","s_current"],
		components: {
			SeriesItem
		},
		computed: {
			style() {
				return {}
			}
		},
		data() {
			return {
				type: this.s_type,//控制弹窗模板、控制弹窗显示隐藏true/false
				swiperList:this.s_list,
				current:this.s_current?this.s_current:0,
			};
		},
		computed: {
			isShowTags() {
				return this.$store.getters.isShowTags
			}
		},
		methods: {
			change(e) {
				this.current = e.target.current
				this.$emit("change", this.current)
			},
			navigateTo(product) {
				uni.$u.route({
					url: product.type == 'nft' ? 'pages/nftDetail/index':'pages/productDetail/index',
					params: {
						productId: product.id
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.swiper2_active{
		transform: scale(1.25);
	}
	.swiper3{
		position: relative;
		width: 100%;
		height: 830rpx;
		display: flex;
		align-items: center;
		//margin-top: 30rpx;
		swiper-item{
			.swiper3_item{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				transition: all 0.5s ease;
				overflow: hidden;
				border-radius: 400rpx;
				// image{
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: center;
				// 	flex-wrap: wrap;
				// }
			}
		}
	}
	.swiper2{
		position: relative;
		width: 100%;
		height: 375rpx;
		display: flex;
		align-items: center;
		swiper-item{
			.swiper2_item{
				position: absolute;
				top: 50rpx;
				bottom: 50rpx;
				left: 50rpx;
				right: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
				transition: all 0.5s ease;
				//overflow: hidden;
				image{
					display: flex;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
				}
				.product-item {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-wrap: wrap;
					.image-border {
						//background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/index_border.png) no-repeat;
						//background-size: 100%;
						width: 174.4rpx;
						height:  174.4rpx;
						border-radius: 13rpx;
						position: relative;
						image {
							//width: 198.3rpx;
							//height: 198.3rpx;
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
						.sold {
							position: absolute;
							top: 50%;
							left: 50%;
							margin-top: -50rpx;
							margin-left: -50rpx;
							z-index: 9999;
						}
						.nft-tag {
							position: absolute;
							width: 83.3rpx;
							height: 30rpx;
							top: 15rpx;
							left: 20rpx;
							background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/967825cfb630bf72832c10b8d3ed3d64ad249bc8.png) no-repeat;
							background-size: 100% 100%;
						}
					}
					.product-info {
						margin-top: 10rpx;
						padding: 0 12.5rpx;
						.product-name {
							font-size: 23rpx;
							color: #000000;
						}
						.product-price {
							margin: 8rpx auto 0 auto;
							width: 125.8rpx;
							height: 33.3rpx;
							//background: #000000;
						}
					}
				}
			}
		}
	}

	.swiper1{
		position: relative;
		width: 100%;
		height: 500rpx;
		swiper-item{
			.swiper1_item{
				position: relative;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
			}
		}
	}
	.autoImage {
		position: relative;
		width: auto;
		height: auto;
		min-width: 100%;
		min-height: 100%;
		border-radius: 2rpx;
		/* 小程序image与image之间的空隙解决 */
		vertical-align: top;
	}
</style>
<!--
 indicator-dots	Boolean	false	是否显示面板指示点
 indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
 indicator-active-color	Color	#000000	当前选中的指示点颜色
 active-class	String		swiper-item 可见时的 class	支付宝小程序
 changing-class	String		acceleration 设置为 {{true}} 时且处于滑动过程中，中间若干屏处于可见时的class	支付宝小程序
 autoplay	Boolean	false	是否自动切换
 current	Number	0	当前所在滑块的 index
 current-item-id	String		当前所在滑块的 item-id ，不能与 current 被同时指定	支付宝小程序不支持
 interval	Number	5000	自动切换时间间隔
 duration	Number	500	滑动动画时长	app-nvue不支持
 circular	Boolean	false	是否采用衔接滑动，即播放到末尾后重新回到开头
 vertical	Boolean	false	滑动方向是否为纵向
 previous-margin	String	0px	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	app-nvue、字节跳动小程序不支持
 next-margin	String	0px	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	app-nvue、字节跳动小程序不支持
 acceleration	Boolean	false	当开启时，会根据滑动速度，连续滑动多屏	支付宝小程序
 disable-programmatic-animation	Boolean	false	是否禁用代码变动触发 swiper 切换时使用动画。	支付宝小程序
 display-multiple-items	Number	1	同时显示的滑块数量	app-nvue、支付宝小程序不支持
 skip-hidden-item-layout	Boolean	false	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	App、微信小程序
 disable-touch	Boolean	false	是否禁止用户 touch 操作	App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序（只在初始化时有效，不能动态变更）
 touchable	Boolean	true	是否监听用户的触摸事件，只在初始化时有效，不能动态变更	字节跳动小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch）
 easing-function	String	default	指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic	微信小程序
 @change	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}
 @transition	EventHandle		swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy	App、H5、微信小程序、支付宝小程序、字节跳动小程序、QQ小程序
 @animationfinish	EventHandle		动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}	字节跳动小程序不支持
 -->
